<!--
 * @Description:
 * @Author: Mr.CYQ
 * @Date: 2024-05-23 09:50:07
 * @LastEditors: Mr.CYQ
 * @LastEditTime: 2024-06-25 12:04:21
-->
<template>
  <div id="DeviceTree">
    <el-container>
      <el-header>
        <el-input v-model="filterText" placeholder="输入关键字进行过滤" />
      </el-header>
      <el-main>
        <div class="device-tree-main-box">
          <el-tree
            ref="gdTree"
            :filter-node-method="filterNode"
            :load="loadNode"
            :props="{...defaultProps,...{class:customNodeClass}}"
            lazy
            node-key="id"
            style="min-width: 100%; display:inline-block !important;"
            @node-click="handleNodeClick"
            @node-contextmenu="handleContextMenu"
          />
        </div>
      </el-main>
    </el-container>
  </div>
</template>

<script lang="ts" setup>
import { ref } from "vue";
import { ElTree } from "element-plus";
import { listCommunity } from "@/api/system/community";
import { listMonitorArea } from "@/api/wvp/monitorArea";
import { getDeviceChannel, listDeviceChannel } from "@/api/video_monitor/channel";


interface Tree {
  [key: string]: any;
}

const filterText = ref("");
const gdTree = ref();

const customNodeClass = (data: Tree, node: Node) => {
  if (data.isPenultimate) {
    return "is-penultimate";
  }
  return null;
};
const defaultProps = {
  children: "children",
  label: "name",
  isLeaf: "isLeaf"
};

const props = defineProps({
  device: {
    type: Object,
    default: false
  },
  onlyCatalog: {
    type: String,
    default: false
  },
  clickEvent: {
    type: Function,
    default: false
  }
});
// 定义要触发的自定义事件
const emit = defineEmits(["clickEvent", "contextMenuEvent"]);
watch(filterText, (val) => {
  gdTree.value!.filter(val);
});
const filterNode = (value: string, data: Tree) => {
  if (!value) return true;
  return data.name.includes(value);
};
const handleNodeClick = async (data: any, node: any) => {
  console.log("handleNodeClick", data);
  //查询通道设备详情
  if (data.isLeaf) {
    let res = await getDeviceChannel(data.id);
    let device = res.data;
    props.clickEvent(device, data.type === 2);
  }
};
/**右键点击事件 */
const handleContextMenu = (event: Event, data: any) => {
  console.log("右键点击事件");
  let deviceNode = gdTree.value.getNode(data.userData.deviceId);
  emit("contextMenuEvent", deviceNode.data.userData, event, data.userData, data.type === 2);
};

const loadNode = async (node: any, resolve: any) => {
  console.log(node);
  if (node.level === 0) {
    let res = await listCommunity();
    let nodeList = [];
    for (let rowsKey in res.rows) {
      let item = res.rows[rowsKey];
      let node = {
        name: item.name,
        isLeaf: false,
        id: item.communityId
      };
      nodeList.push(node);
    }
    return resolve(nodeList);
  }
  if (node.level == 1) {
    //加载区域节点
    let communityId = node.data.id;
    let res = await listMonitorArea({ communityId: communityId });
    let nodeList = [];
    for (let rowsKey in res.rows) {
      let item = res.rows[rowsKey];
      let node = {
        name: item.maName,
        isLeaf: false,
        id: item.maId
      };
      nodeList.push(node);
    }
    return resolve(nodeList);
  }
  if (node.level >= 2) {
    //加载设备节点
    let maId = node.data.id;
    let res = await listDeviceChannel({ maId: maId });
    let nodeList = [];
    for (let rowsKey in res.rows) {
      let item = res.rows[rowsKey];
      let node = {
        name: item.name ? item.name : "未命名设备",
        isLeaf: true,
        id: item.id,
        isPenultimate: item.status == "1"
      };
      nodeList.push(node);
    }
    return resolve(nodeList);
  }
};
</script>

<style lang="scss">

.is-penultimate > .el-tree-node__content {
  color: #0beb16;
}
</style>
